<template>
  <div class="box-full box-border px-24 flex-col">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item field="isRecommend" hide-label>
        <a-select
          class="w-50n"
          v-model="listParams.isRecommend"
          allow-clear
          placeholder="是否推荐"
          @change="changeCurrent(1)"
        >
          <a-option :value="1" label="是"></a-option>
          <a-option :value="0" label="否"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="title" hide-label>
        <a-input v-model="listParams.title" placeholder="输入名称检索" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item hide-label>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-spin class="w-full box-border flex-1 overflow-hidden" :loading="loading">
      <a-scrollbar style="height: 100%; overflow-y: auto; padding: 10px 50px 20px 10px">
        <div class="pb-3n box-border">
          <a-grid :cols="{ sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :colGap="18" :rowGap="18">
            <a-grid-item v-for="item in tableData" :key="item.id">
              <div class="m-relative item overflow-hidden p-2">
                <a-card
                  class="box-full box-border m-relative round-10"
                  :class="item.id == checkedValue ? 'checked' : ''"
                  :body-style="{ padding: '10px 8px' }"
                  hoverable
                >
                  <div class="flex-col flex-a-c">
                    <div class="mb-6">
                      <span class="font-bold texct-size-14">{{ item.title }}</span>
                      <span class="text333 text-size-12 ml-10">{{ item.categoryName }}</span>
                    </div>
                    <a-image :src="item.picUrl" class="round-10" width="100%" height="100" fit="cover"></a-image>
                  </div>
                </a-card>
                <div class="overlay round-10">
                  <div class="box-full flex-col-center">
                    <div
                      class="flex-center bg-theme textfff text-size-14 w-44n h-9n round-18 mt-8 cursor-pointer"
                      @click="onChange(item.id)"
                    >
                      <span class="text-size-20" v-if="item.id == checkedValue">✔</span>
                      <span class="ml-4">{{ item.id != checkedValue ? '选择' : '当前选择' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </a-grid-item>
          </a-grid>
        </div>
      </a-scrollbar>
    </a-spin>
    <div class="mt-10 flex flex-j-e">
      <a-pagination v-bind="pagination" />
    </div>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { localLifeList, linkSelect } from '@/apis'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const loading = ref(false)
const tableData = ref([])
const checkedValue = ref()
const listParams = reactive({
  isOpen: 1,
  isRecommend: undefined,
  title: undefined,
  page: 1,
  pageSize: 15
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await localLifeList(listParams)
    tableData.value = res.data.list
    setTotal(res?.data?.count || 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.isRecommend = listParams.title = undefined
  changeCurrent(1)
}
watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 22 && newValue.link) {
      const rule = decodeURIComponent(newValue.link)
      let parsedUrl = new URL(rule)
      let searchParams = parsedUrl.searchParams
      checkedValue.value = searchParams.get('reId')
    } else {
      checkedValue.value = undefined
    }
    changeCurrent(1)
  },
  { deep: true, immediate: true }
)
// 点击选择
const onChange = async (id) => {
  if (checkedValue.value == id) {
    emit('handleCheck')
    return
  }
  const itemData = tableData.value.find((item) => {
    return id === item.id
  })
  const res = await linkSelect({
    rule: props.tabCurrentInfo.rule,
    isLogin: props.tabCurrentInfo?.isLogin ?? undefined,
    param: {
      title: itemData.title,
      id: itemData.categoryId,
      link: itemData.link,
      reId: itemData.id
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>

<style lang="scss" scoped>
.overlay {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: rgba(0, 0, 0, 0.3); /* 设置遮罩层的颜色和透明度 */
  display: none; /* 初始时隐藏遮罩层 */
}
.item:hover .overlay {
  display: block; /* 鼠标放上去时显示遮罩层 */
}
.checked {
  border-color: rgb(var(--primary-6));
}
.arco-scrollbar {
  height: 100%;
}
</style>
